#@layout()

#define css()
<!--<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">-->
<!--<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">-->
<style>
    .content{
        padding: 20px;
    }
    .btn-sync{
        position:relative;
    }
    .btn-sync>.badge{
        display:none;
        position: absolute;
        top: -10px;
        right: -10px;
        font-size: 10px;
        font-weight: 400;
    }
</style>
#end

#define script()
<!--<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>-->
<script>
    function articleSync(self, articleId){
        var loadingTag = "<i class=\"fa fa-refresh fa-spin\"></i>";
        $(self).addClass("disabled").find("span")
            .removeClass("bg-red")
            .addClass("bg-green")
            .html(loadingTag)
            .show();

        // $.showLoading();
        ajaxPost('#(CAPTH)/admin/articlesync/doPublish', {
            "platform" : self.dataset.platform,
            "articleId" : articleId
        }, function (ret) {
            $(self).removeClass("disabled")
                .find("span")
                .html("<i class=\"fa fa-fw fa-check\"></i>" + ret.message);
            // setTimeout($(self).find("span").hide(), 5000);
        }, function (ret){
            $(self).removeClass("disabled")
                .find("span")
                .removeClass("bg-green")
                .addClass("bg-red")
                .html(ret.message);
        })
    }


    $('#wechatImport').click(function () {
        ajaxGet("/admin/setting/tools/wechat/doImport",
            function (result) {
                showMessage(result.message);
            },
            function (result) {
                showErrorMessage(result.message);
            })
    });

</script>
#end

#define content()
<div class="content-wrapper">
    <section class="content-header">
        <h1>
            文章同步
            <small>Article Sync</small>
        </h1>
    </section>

    <section class="content">
        #if(!verifyAllRight)
        <div class="row">
            <div class="col-xs-12">
                <div class="alert alert-warning alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    <h4><i class="icon fa fa-warning"></i> 账号不可用</h4>
                    #for(platform : platformList)
                        #if(platform.verify)
                            <p class="text-green"><i class="fa fa-fw fa-check"></i>#(platform.displayName):验证通过</p>
                        #else
                            <p class="text-red"><i class="fa fa-fw fa-close"></i>#(platform.displayName):验证失败：#(platform.msg)</p>
                        #end
                    #end
                </div>
            </div>
        </div>
        #end
        <div class="row">
            <div class="col-xs-12">
                #if(verifyAllRight)
                <a class="btn btn-primary" href="/admin/articlesync/configPage">账号设置</a>
                #else
                <a class="btn btn-danger" href="/admin/articlesync/configPage">
                    <i class="fa fa-fw fa-exclamation"></i>账号设置
                </a>
                #end
                <a class="btn btn-success" id="wechatImport">
                    <i class="fa fa-fw fa-weixin"></i>微信导入
                </a>
                #if(hasNew)
                <a class="btn btn-warning" id="upgrade" target="_blank" href="#(updateUrl ?? 'http://gitee.com/nianzecong')">
                    <i class="fa fa-fw fa-download"></i>更新到#(newVer ?? '新版本')
                </a>
                #end
            </div>
        </div>
        <p></p>
        <div class="row">
            <div class="col-xs-12">
                <div class="box box-primary">

                    <!-- /.box-header -->
                    <div class="box-body ">
                        <table class="table table-striped">
                            <tbody>
                            <tr>
                                <th class="col-md-1">ID</th>
                                <th class="col-md-4">标题</th>
                                <th class="col-md-2">发布时间</th>
                                <th class="col-md-5">操作</th>
                            </tr>
                            #for(article : page.list)
                            <tr class="jp-actiontr">
                                <td>#(article.id ??)</td>
                                <td>
                                    <strong>
                                        <a href="#(CPATH)/admin/article/write/#(article.id)">#(article.title ??)</a>
                                        #if(article.isDraft())
                                        （草稿）
                                        #end
                                    </strong>
                                    <div class="jp-actionblock">
                                        #if(article.isNormal())
                                        <div class="jp-actionitem">
                                            <a href="#(CPATH)/admin/article/write/#(article.id)">编辑</a> |
                                            <a href="#(article.url ??)" target="_blank" class="red-action">查看</a>
                                        </div>
                                        #elseif(article.isDraft())
                                        #end
                                    </div>

                                </td>
                                <td>#date(article.created)</td>
                                <td>
                                    #for(platform : platformList)
                                    <a class="btn btn-sync btn-primary" data-platform="#(platform.name)" onclick="articleSync(this,'#(article.id)')">
                                        <span class="badge bg-green"></span>
                                        <i class="fa fa-cloud-upload"></i>
                                        #(platform.displayName)
                                    </a>
                                    #end
                                </td>
                            </tr>
                            #end

                            </tbody>
                        </table>
                    </div>
                    <!-- /.box-body -->
                    <div class="box-footer">
                        <div class="row">
                            <div class="col-sm-12">
                                #@_paginate()
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.box -->
            </div>
        </div>
    </section>

</div>
#end
